<template>
    <el-dialog
      :title="title"
      v-model="visible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
        <el-form-item label="医生ID" prop="doctorId">
          <el-input v-model="form.doctorId" placeholder="请输入医生ID" />
        </el-form-item>
        <el-form-item label="服务类型" prop="serviceTypeId">
          <el-select
            v-model="form.serviceTypeId"
            placeholder="请选择服务类型"
            filterable
          >
            <!-- 只显示启用状态的服务类型 -->
            <el-option
              v-for="item in enabledServiceTypes"
              :key="item.serviceTypeId"
              :label="item.name"
              :value="item.serviceTypeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="服务费用" prop="fee">
          <el-input-number
            v-model="form.fee"
            :min="0"
            :precision="2"
            placeholder="请输入费用"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
      </template>
    </el-dialog>
  </template>
  
  
  <script setup>
  import { ref, defineExpose, computed } from 'vue';
  import { getDoctorServiceTypeListAPI } from '@/network/doctor_service_type';
  import { addDoctorServiceFeeAPI, updateDoctorServiceFeeAPI } from '@/network/doctor_service_fee';
  import feedback from '@/utils/feedback';
  
  const visible = ref(false);
  const title = ref('添加绑定');
  const form = ref({
    serviceFeeId: null,
    doctorId: '',
    serviceTypeId: '',
    fee: 0
  });
  const serviceTypes = ref([]);
  const loading = ref(false);
  const formRef = ref(null);
  
  // 计算属性过滤出启用状态的服务类型
  const enabledServiceTypes = computed(() => 
    serviceTypes.value.filter(item => item.status === 1)
  );
  
  const rules = {
    doctorId: [{ required: true, message: '请输入医生ID', trigger: 'blur' }],
    serviceTypeId: [{ required: true, message: '请选择服务类型', trigger: 'change' }],
    fee: [{ required: true, message: '请输入费用', trigger: 'blur' }]
  };
  
  // 加载服务类型时添加状态筛选参数
  const loadServiceTypes = async () => {
    const res = await getDoctorServiceTypeListAPI({ 
      pageNum: 1, 
      pageSize: 100,
      status: 1 // 强制查询启用状态的服务类型
    });
    serviceTypes.value = res.records;
  };
  const open = (row) => {
    if (row?.serviceFeeId) {
      title.value = '编辑绑定';
      form.value = { ...row };
    } else {
      title.value = '添加绑定';
      form.value = {
        serviceFeeId: null,
        doctorId: '',
        serviceTypeId: '',
        fee: 0
      };
    }
    visible.value = true;
    loadServiceTypes();
  };
  
  const submit = async () => {
    try {
      await formRef.value.validate();
      loading.value = true;
      
      const api = form.value.serviceFeeId ? updateDoctorServiceFeeAPI : addDoctorServiceFeeAPI;
      await api(form.value);
      
      feedback.msgSuccess('操作成功');
      visible.value = false;
      emit('success');
    } catch (error) {
      console.error(error);
    } finally {
      loading.value = false;
    }
  };
  
  defineExpose({ open });
  </script>